<template>
  <div style="text-align: center">
    <el-table
      :data="tableData"
      style="width: 90%;text-align: left;margin: auto">
      <el-table-column
        label="日期"
        width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="姓名"
        width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="所属党派"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>党龄: {{ scope.row.age }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.party }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>


      <el-table-column
        label="积分"
        width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.integral }}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openIntroduction()">预览</el-button>
          <el-button
            size="mini" type="primary" @click="dialogFormVisible = true">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--弹出编辑信息框-->
    <el-dialog title="人员信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="人员名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属党派" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择党派名称">
            <el-option label="党派一" value="shanghai"></el-option>
            <el-option label="党派二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="待扩展信息..." :label-width="formLabelWidth">

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>


    <div style="width:90%;text-align: right;margin-top: 20px">
      <el-pagination
        @size-change=""
        @current-change=""
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    methods: {
      openIntroduction() {
        window.open("introduction.html", "_blank")
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        currentPage3: 5,
        tableData: [
         {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          age: 3,
          integral: 100,
          party: 'xx党'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          age: 3,
          integral: 100,
          party: 'xx党'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          age: 3,
          integral: 100,
          party: 'xx党'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          age: 3,
          integral: 100,
          party: 'xx党'
        },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            age: 3,
            integral: 100,
            party: 'xx党'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            age: 3,
            integral: 100,
            party: 'xx党'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            age: 3,
            integral: 100,
            party: 'xx党'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            age: 3,
            integral: 100,
            party: 'xx党'
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            age: 3,
            integral: 100,
            party: 'xx党'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            age: 3,
            integral: 100,
            party: 'xx党'
          },
        ],
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      }
    }
  }
</script>


<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
